<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="contentAdd"><i class="el-icon-plus"></i>内容</el-button>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="分公司" v-if="isBranch">
        <el-select v-model="formInline.branchId" style="width: 180px" filterable>
          <el-option
            v-for="item in branchList"
            :label="item.branch_Name"
            :value="item.branch_Id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分公司" v-else>
        <el-input v-model="this.branchName" disabled></el-input>
      </el-form-item>
      <el-form-item label="ID">
        <el-input v-model="formInline.id" style="width: 100px"></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="formInline.name" style="width: 150px"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.state" style="width: 150px" @change="stateChange" filterable clearable>
          <el-option label="草稿" value="1"></el-option>
          <el-option label="新建待审核" value="2"></el-option>
          <el-option label="待上线" value="3"></el-option>
          <el-option label="上线" value="4"></el-option>
          <el-option label="编辑待审核" value="5"></el-option>
          <el-option label="下线待审核" value="6"></el-option>
          <el-option label="下线" value="7"></el-option>
          <el-option label="待下线" value="8"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="isLoading"
      :data="tableData"
      style="width: 100%"
      border>
      <el-table-column
        prop="id"
        show-overflow-tooltip
        label="ID"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        prop="name"
        label="内容名称"
        align="center"
        width="140">
      </el-table-column>
      <el-table-column
        prop="contentModeName"
        label="内容形式"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        prop="branchName"
        label="可用城市"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="stateName"
        label="状态"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="comment"
        label="备注"
        align="center"
        width="200">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        min-width="280" >
        <template scope="scope">
          <el-button @click="handle(scope.$index, scope.row, $event)" size="small">详情</el-button>
          <el-button v-if="scope.row.stateName === '草稿' || scope.row.stateName === '待上线' || scope.row.stateName === '上线'" @click="handle(scope.$index, scope.row, $event)" size="small">编辑</el-button>
          <el-button v-if="scope.row.stateName === '待上线' || scope.row.stateName === '上线'" @click="handle(scope.$index, scope.row, $event)" size="small">下线</el-button>
          <el-button v-if="scope.row.stateName === '草稿' || scope.row.stateName === '新建待审核' || scope.row.stateName === '下线'" @click="handle(scope.$index, scope.row, $event)" size="small">删除</el-button>
          <!--<el-button v-if="scope.row.stateName === '新建待审核' || scope.row.stateName === '下线待审核' || scope.row.stateName === '编辑待审核'" @click="approve(scope.$index, scope.row, $event)" size="small"><i class="el-icon-check"></i></el-button>-->
          <!--<el-button v-if="scope.row.stateName === '新建待审核' || scope.row.stateName === '下线待审核' || scope.row.stateName === '编辑待审核'" @click="noApprove(scope.$index, scope.row, $event)" size="small"><i class="el-icon-close"></i></el-button>-->
          <el-button v-if="scope.row.stateName === '新建待审核' || scope.row.stateName === '编辑待审核' || scope.row.stateName === '下线待审核'" @click="revoke(scope.$index, scope.row, $event)" size="small">撤销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="Number(pageData.pageSize)"
      layout="total, prev, pager, next"
      :total="Number(total)"
      style="padding-top:10px;text-align: right;">
    </el-pagination>
    <!--详情弹窗-->
    <el-dialog title="详情" :visible.sync="detailDialog" top="10%" class="detail-info">
      <template>
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="编辑前" name="before">
            <div class="form-item">
              <pre style="margin-left: -60px; margin-bottom: -20px; line-height: 25px">
                状态：{{detailData.oldData.stateName}}
                内容名称：{{detailData.oldData.name}}
                内容备注：{{detailData.oldData.comment}}
                内容形式：{{detailData.oldData.contentModeName}}
                分公司：{{detailData.oldData.branchName}}
                上线类型：{{detailData.oldData.onlineModeName}}
                上线生效时间：{{detailData.oldData.onlineTime}}
                上线备注：{{detailData.oldData.onlineComment}}
                下线类型：{{detailData.oldData.offlineModeName}}
                下线生效时间：{{detailData.oldData.offlineTime}}
                下线备注：{{detailData.oldData.offlineComment}}
                创建人：{{detailData.oldData.createUser}}
                创建时间：{{detailData.oldData.createTime}}
                编辑人：{{detailData.oldData.updateUser}}
                编辑时间：{{detailData.oldData.updateTime}}
                审核人：{{detailData.oldData.auditor}}
                审核时间：{{detailData.oldData.auditTime}}
              </pre>
            </div>
            <div class="form-item" v-show="detailData.oldData.contentMode === 1">
              <el-table
                :data="detailData.oldData.newContentDatas"
                style="width: 100%"
                border>
                <el-table-column
                  prop="productId"
                  label="商品ID"
                  width="100">
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="productName"
                  min-width="200"
                  label="商品名称">
                </el-table-column>
              </el-table>
            </div>
            <div class="form-item" v-show="detailData.oldData.contentMode === 2">
              <el-form label-width="120px">
                <el-form-item label="跳转链接">
                  <span>{{detailData.oldData.link}}</span>
                </el-form-item>
              </el-form>
            </div>
            <div class="form-item" v-show="detailData.oldData.contentMode === 3">
              <el-form label-width="120px">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="PC页面">
                      <span>{{detailData.oldData.pcName}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="惠配通页面">
                      <span>{{detailData.oldData.hptName}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="惠付通页面">
                      <span>{{detailData.oldData.hftName}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="编辑后" name="after">
            <div class="form-item">
              <pre style="margin-left: -60px; margin-bottom: -20px; line-height: 25px">
                状态：{{detailData.newData.stateName}}
                内容名称：{{detailData.newData.name}}
                内容备注：{{detailData.newData.comment}}
                内容形式：{{detailData.newData.contentModeName}}
                分公司：{{detailData.newData.branchName}}
                上线类型：{{detailData.newData.onlineModeName}}
                上线生效时间：{{detailData.newData.onlineTime}}
                上线备注：{{detailData.newData.onlineComment}}
                下线类型：{{detailData.newData.offlineModeName}}
                下线生效时间：{{detailData.newData.offlineTime}}
                下线备注：{{detailData.newData.offlineComment}}
                创建人：{{detailData.newData.createUser}}
                创建时间：{{detailData.newData.createTime}}
                编辑人：{{detailData.newData.updateUser}}
                编辑时间：{{detailData.newData.updateTime}}
                审核人：{{detailData.newData.auditor}}
                审核时间：{{detailData.newData.auditTime}}
              </pre>
            </div>
            <div class="form-item" v-show="detailData.newData.contentMode === 1">
              <el-table
                :data="detailData.newData.newContentDatas"
                style="width: 100%"
                border>
                <el-table-column
                  prop="productId"
                  label="商品ID"
                  width="100">
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="productName"
                  min-width="200"
                  label="商品名称">
                </el-table-column>
              </el-table>
            </div>
            <div class="form-item" v-show="detailData.newData.contentMode === 2">
              <el-form label-width="120px">
                <el-form-item label="跳转链接">
                  <span>{{detailData.newData.link}}</span>
                </el-form-item>
              </el-form>
            </div>
            <div class="form-item" v-show="detailData.newData.contentMode === 3">
              <el-form label-width="120px">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="PC页面">
                      <span>{{detailData.newData.pcName}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="惠配通页面">
                      <span>{{detailData.newData.hptName}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="惠付通页面">
                      <span>{{detailData.newData.hftName}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-dialog>
    <!--下线弹窗-->
    <el-dialog title="下线操作" :visible.sync="stopDialog">
      <el-form :model="stopForm" style="margin-top: 20px" label-width="160px">
        <el-form-item label="下线类型" required>
          <el-select v-model="stopForm.offlineMode" style="width: 230px" placeholder="请选择">
            <el-option label="审核通过后生效" value="1"></el-option>
            <!--<el-option label="定时生效" value="2"></el-option>-->
          </el-select>
        </el-form-item>
        <el-form-item label="定时时间" v-show="stopForm.offlineMode === '2'" required>
          <el-date-picker
            :picker-options="pickerOptions"
            v-model="stopForm.offlineTime"
            type="datetime"
            @change="timeChange"
            value-format="yyyy-MM-dd-HH-mm-ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="下线说明" style="width: 500px">
          <el-input type="textarea" v-model="stopForm.offlineComment"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="makeSure">确 定</el-button>
        <el-button @click="stopDialog = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { column } from '../../../config/proxy.js'
  import mixins from '../../../components/mixins.vue'
  export default {
    mixins: [mixins],
    data () {
      return {
        pickerOptions: {
          disabledDate (time) {
            return time.getTime() < new Date().getTime() - 8.64e7
          }
        },
        formInline: {
          id: '',
          name: '',
          state: '',
          branchId: ''
        },
        tableData: [],
        isLoading: false,
        pageData: {
          pageSize: 10,
          page: 1
        },
        total: '',
//      详情弹窗
        activeName: 'after',
        detailDialog: false,
        detailData: {
          oldData: {
            newContentDatas: []
          },
          newData: {
            newContentDatas: []
          }
        },
//      下线弹窗
        stopDialog: false,
        stopForm: {
          offlineMode: '1',
          offlineComment: '',
          offlineTime: ''
        }
      }
    },
    methods: {
      stateChange () {
        this.pageData.page = 1
      },
      contentAdd () {
        this.openNewWindow('contenta_add', '新增内容', 'contenta_add')
      },
      onSubmit (val) {
//        if (val && typeof (val) === 'number') {
//          this.pageData.page = val
//        } else {
//          this.pageData.page = 1
//        }
        this.isLoading = true
        const queryData = {
          branchId: this.branchId === 1 ? this.formInline.branchId : this.branchId,
          id: this.formInline.id,
          name: this.formInline.name,
          page: this.pageData.page,
          pageSize: this.pageData.pageSize,
          state: this.formInline.state
        }
        column.content.list(queryData, (res) => {
          console.log(res, '分页的数据')
          if (res.message === 'ok') {
            this.tableData = res.content.content
            this.total = res.content.count
//            this.pageData.page = res.content.page
            this.isLoading = false
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },  // 查询
      handleCurrentChange (val) {
        this.pageData.page = val
        this.onSubmit()
      }, // 分页
      handle (index, row, event) {
        const handleName = event.target.innerText
        switch (handleName) {
          case '详情':
            if (row.state !== 5) {
              this.openNewWindow('contenta_detail', '内容详情', 'contenta_detail', row.id)
            } else {
              this.activeName = 'after'
              column.content.detail({id: row.id, type: row.state}, (res) => {
                if (res.message === 'ok') {
                  this.detailData.oldData = res.content.old
                  this.detailData.newData = res.content.edit
                  this.detailDialog = true
                } else {
                  this.$message({
                    showClose: true,
                    message: res.message,
                    type: 'error'
                  })
                }
              })
            }
            break
          case '删除':
            this.$confirm('您确定要删除此活动?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              column.content.cancel({id: row.id}, res => {
                if (res.message === 'ok') {
                  this.onSubmit()
                  this.$message({
                    type: 'success',
                    message: 'ok'
                  })
                  this.$store.dispatch('contentCheckState', this.$store.state.updateState.contentCheckState + 1)
                } else {
                  this.$message({
                    type: 'error',
                    message: '删除失败'
                  })
                }
              })
            }).catch(() => {
            })
            break
          case '下线':
            this.stopForm.id = row.id
            this.stopForm.status = row.state
//          重置
            this.stopForm.offlineMode = '1'
            this.stopForm.offlineComment = ''
            this.stopForm.offlineTime = ''
            this.stopDialog = true
            break
          case '编辑':
            this.openNewWindow('contenta_edit', '编辑内容', 'contenta_add', row)
            break
        }
      },
      revoke (index, row) {
        const _data = {
          id: row.id,
          type: row.state
        }
        column.content.revoke(_data, res => {
          if (res.message === 'ok') {
            this.onSubmit()
            this.$store.dispatch('contentCheckState', this.$store.state.updateState.contentCheckState + 1)
          }
        })
      }, // 撤销
      makeSure () {
        if (this.stopForm.offlineMode === '2') {
          if (this.stopForm.offlineTime === '') {
            this.$message({
              showClose: true,
              message: '请设置下线定时时间',
              type: 'error'
            })
            return false
          } else if (new Date(this.stopForm.offlineTime).getTime() < new Date().getTime()) {
            this.$message({
              showClose: true,
              message: '定时时间应晚于当前时间',
              type: 'error'
            })
            this.stopForm.offlineTime = ''
            return false
          }
        } // 下线定时时间验证
        column.content.offLine(this.stopForm, res => {
          if (res.message === 'ok') {
            this.stopDialog = false
            this.onSubmit()
            this.$store.dispatch('contentCheckState', this.$store.state.updateState.contentCheckState + 1)
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },      // 下线
      timeChange (val) {
        this.stopForm.offlineTime = val
      }  // 下线时间变化
    },
    computed: {
      orgName: function (state) {
        return this.$store.state.user.info.parOrgName
      },
      orgId: function (state) {
        return this.$store.state.user.info.or_org_id
      },
      branchName: function (state) {
        return this.$store.state.user.info.branchId === 1 ? '总公司' : this.$store.state.user.info.branchName
      },
      branchId: function (state) {
        return this.$store.state.user.info.branchId
      },
      update_state: function () {
        return this.$store.state.updateState.contentState
      }
    },
    watch: {
      update_state (curVal, oldVal) {  // 监听 更新状态 查询list
        this.onSubmit()
      }
    },
    created () {
      this.onSubmit()
    }
  }
</script>
<style>
  @media screen and (min-width:1000px) {
    .supplier-form{
      max-width: 600px;
    }
  }
  .el-form--inline div {
    display: inline-block;
    float: left;
  }
  .el-dialog__body {
    padding-top: 0;
  }
  .shuoming {
    line-height: 2;
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
  }
</style>
